<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <t-rating
        ref="refComponent"
        color="#f33,#ff0,#000,#0ff"
        icon="star_border"
        :disable="false"
        :max="5"
        :no-reset="true"
        :readonly="false"
        size="3.5em"
        v-model="ratingModel"
        :hideLabel="false"
        label="打个分吧"
        :showText="true"
        texts="不开心,平静,小小愉悦,开心得不得了"
        :visible="true"
        required
        required-message="评分是必填的哦"
        :tabIndex="2"
        labelPosition="left"
        @change="onChange"
        @click="onClick"
      />

      <t-button @click="validate">点击校验</t-button>
      <t-button @click="ratingModel = 5">改变外部值</t-button>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const ratingModel = ref(3);
  const ratingColors = '';

  // 校验
  const refComponent = ref(null);
  function validate() {
    refComponent.value.validate();
  }
  function onClick() {
    console.log('======点击');
  }
  function onChange(v) {
    console.log('======变更', v);
  }
</script>
